import React from 'react'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import PubSub from 'pubsub-js'
import { Layout, Menu } from 'antd'
import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
} from '@ant-design/icons';
import './index.css'

const { Sider } = Layout

const { SubMenu } = Menu;

function useSider() {

    const [collapsed, setCollapsed] = useState(false)

    const onCollapse = collapsed => {
        console.log(collapsed);
        setCollapsed(collapsed)
    };

    const history = useHistory()

    const onSelect = ({ key }) => {
        history.push(key)
        PubSub.publish('barItem', key);
    }

    return {
        collapsed,
        onCollapse,
        onSelect
    }

}

const MySider = () => {

    const { collapsed, onCollapse, onSelect } = useSider()

    return (
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
            <div id="logo">
                <h1>Vivi</h1>
            </div>
            <Menu theme="dark"
                onSelect={onSelect}
                defaultSelectedKeys={['/admin/home']} mode="inline">
                <Menu.Item key="/admin/home" icon={<PieChartOutlined />}>
                    首页
                </Menu.Item>
                <Menu.Item key="/admin/tag" icon={<DesktopOutlined />}>
                    标签管理
                </Menu.Item>
                <Menu.Item key="/admin/classes" icon={<DesktopOutlined />}>
                    分类管理
                </Menu.Item>
                <SubMenu key="sub2" icon={<TeamOutlined />} title="博文管理">
                    <Menu.Item key="/admin/blog/list">博文列表</Menu.Item>
                    <Menu.Item key="/admin/blog/edit">编辑博文</Menu.Item>
                </SubMenu>
                <Menu.Item key="/admin/message" icon={<FileOutlined />}>
                    留言管理
                </Menu.Item>
            </Menu>
        </Sider>
    )
}

export default MySider
